<template>
  <div class='search'>
    <div class="pr">
      <input type="text" placeholder="输入关键字搜索" v-model="search">
      <span class="pa" @click.stop="getResult">
        <img class="search-model2" :src="imgs.logo" alt="">
      </span>
    </div>
  </div>
</template>
<script>
export default {
  props:["searchFun"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        logo:require('../../assets/img/hpmepage/search.png')
      },
      search:"",
    };
  },
  methods: {
    getResult(){
      if(!this.searchFun){console.warn("没有传入searchFun");return}
      this.searchFun(this.search)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.search {
  height: 54px;
  background-color: #fff;

  >div{
    margin: 0 15px;
    transform: translateY(10px);

    input{
        border: 1px solid #FF9F20;
        outline: none;
        text-align: center;
        height: 34px;
        line-height: 32px;
        width: 100%;
        border-radius: 17px;
        box-sizing: border-box;
      }

      span{
        right: 0px;
        top: 0px;
        height: 100%;
        width: 45px;
        line-height: 34px;
        text-align: center;
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        background-color: #FF9F20;
        color: #fff;
      }

      span:active{
        opacity: .6;
      }

      img{
        width: 20px;
        margin: 6px auto;
      }

  }
}
</style>